<%--
  Created by IntelliJ IDEA.
  User: Ken
  Date: 2022/5/6
  Time: 16:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>房间列表</title>
    <style>
        body {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        table th{
            background-color: #fcefa1;
            padding: 20px;
        }

        table td{
            background-color: #e6e6e6;
            padding: 20px;
            text-align: center;
        }
    </style>

    <script src="js/jquery.min.js"></script>
    <script>
        $(function(){
            //获取房间列表
            initRoomList();
        });

        //初始化房间列表
        function initRoomList(){
            //ajax请求
            $.ajax({
                type: "GET",
                url: "roomServlet?method=roomList",
                success: function(data){
                    var html = "";
                    for(var i = 0; i < data.length; i++){
                        html += "<tr>";
                        html += "<td>" + data[i].rid + "</td>";
                        html += "<td>" + data[i].title + "</td>";
                        html += "<td>" + (data[i].type == 0 ? '公开' : '私密') + "</td>";
                        html += "<td>" + (data[i].status == 0 ? '等待中...' : '对局中...') + "</td>";
                        html += "<td>" + (data[i].islook == 0 ? '可观战' : '禁止观战') + "</td>";
                        html += "<td>" + (data[i].status == 0 ? '<button onclick="addRoom(' + data[i].rid + ', 0)">加入对局</button>' : '') + (data[i].islook == 0 ? '<button onclick="addRoom(' + data[i].rid + ', 1)">观看对局</button>' : '') + "</td>";
                        html += "</tr>"
                    }

                    //将页面数据拼接到table里
                    $("table").append(html);
                },
                dataType: "json"
            });
        }

        //加入房间
        function addRoom(rid, looks){
            //用新的页面打开game.jsp
            window.open("game.jsp?rid=" + rid + "&looks=" + looks);
        }
    </script>
</head>
<body>
    <h1>房间列表</h1>
    <table>
        <tr>
            <th>房间号</th>
            <th>标题</th>
            <th>房间类型</th>
            <th>状态</th>
            <th>是否可观战</th>
            <th>操作</th>
        </tr>
    </table>

</body>
</html>
